<template>
  <div class="text-10 text-bold">
    <div class="mb-12">
      <div
        class="handicap-data  flex js-sp align-center text-green "
        v-for="(item, index) in state.sellList"
        :key="index"
        v-show="index < 5"
      >
        <div class="w_80 text-left flex-shrink-0">
          {{ $t("deal.sell") }}
        </div>
        <div class="color_1e flex-grow-1">{{ $currency(item.price) }}</div>
        <div class="right quotet3 text-right color_1e flex-grow-1">
          {{ $currency(item.number) }}
        </div>
        <div
          class="hove-bg green-bg"
          :style="{ width: item.percen_tage * 100 + '%' }"
        ></div>
      </div>
    </div>
    <div class="bdb-borderDark mb-12"></div>
    <div
      class="handicap-data  flex js-sp align-center "
      v-for="(item, index) in state.buyList"
      :key="index"
      v-show="index < 5"
    >
      <div class="w_80 text-left text-red flex-shrink-0">
        {{ $t("deal.buy") }}
      </div>
      <div class="color_1e flex-grow-1">{{ $currency(item.price) }}</div>
      <div class="right quotet3 text-right color_1e flex-grow-1">
        {{ $currency(item.number) }}
      </div>
      <div
        class="hove-bg red-bg"
        :style="{ width: item.percen_tage * 100 + '%' }"
      ></div>
    </div>
  </div>
</template>

<script>
import { computed, reactive, watch, nextTick } from "vue";
import { stockRobotQuotation } from "@/api/stock";
import { numSort } from "@/utils/common";
import { useStore } from "vuex";
export default {
  name: "Handicap",
  props: {
    time: Number,
    buylist: Array,
    selllist: Array,
    nowprice: Number,
  },
  setup(props) {
    const $store = useStore();
    const state = reactive({
      buyList: [],
      sellList: [],
    });
    const getTrading = computed(() => {
      return $store.state.exchange.stock_data;
    });
    watch(getTrading, (val) => {
      getData(val.id);
    });
    watch(props, (val) => {
      if (val.buylist?.length > 0) {
        state.buyList = numSort("desc", val.buylist, "price");
      }
      if (val.selllist?.length > 0) {
        state.sellList = numSort("desc", val.selllist, "price");
      }
    });
    const getData = (id) => {
      nextTick(() => {
        if (props.buylist.length > 0) {
          state.buyList = numSort("desc", props.buylist, "price");
        }
        if (props.selllist.length > 0) {
          state.sellList = numSort("desc", props.selllist, "price");
        }
      });

      stockRobotQuotation(id).then((res) => {
        if (res.data.buy_trade_list.length > 0) {
          state.buyList = numSort("desc", res.data.buy_trade_list, "price");
        }
        if (res.data.sell_trade_list.length > 0) {
          state.sellList = numSort("desc", res.data.sell_trade_list, "price");
        }
      });
    };
    return {
      state,
      getData,
      getTrading,
    };
  },
};
</script>

<style scoped lang="less">
.handicap-data {
  height: 21px;
  position: relative;
}
.hove-bg {
  position: absolute;
  opacity: 0.2;
  height: 100%;
  right: -10px;
  top: 0;
}
.mb-12 {
  margin-bottom: 12px;
}
.w_80 {
  width: 80px;
}
</style>
